<!--
 * @Author: GKN
 * @Date: 2023-09-11 10:34:25
 * @LastEditTime: 2023-09-11 11:58:10
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\mainAc\jpInfo.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <centerView>
    <template v-slot:view>
        <el-breadcrumb separator=">" class="p-t">
            <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="padding-top:72px ;" v-if="info">
            <div class="tit">{{ info.name }}</div>
            <div class="ad-view po-re" style="height:400px;margin-top: 30px;">
                <imgView :src="info.icon" />
                <div class="ad-more" @click="dialogVisible = !dialogVisible">详询课程</div>
            </div>
            <el-dialog
                v-model="dialogVisible"
                title=""
                width="650"
                :show-close="false"
                :before-close="handleClose"
                style="background: rgba(0,0,0,0);box-shadow: none;"
            >
                <div class="flex-d flex-align shadow-1 border-r6" style="width: 642px;height: 492px;background: linear-gradient(to bottom,#fff9f6,#ffe3d0);padding-top: 44px;">
                    <div style="font-size: 28px;color: #78482f;font-weight: bold;">了解更多详情</div>
                    <div class="ad-view" style="width: 144px;height: 144px;background: #fff;margin-top: 54px;"></div>
                    <div class="MarT35">
                        <div style="font-size: 22px;">添加课程顾问QQ或微信扫码</div>
                        <div class="MarT" style="font-size: 22px;">获得专属学前服务</div>
                    </div>
                    <div class="MarT35">
                        <div class="addbtn">立即添加</div>
                    </div>
                </div>
            </el-dialog>
            <div class="downView flex flex-align" style="margin-top: 27px;">
                <div class="ad-view" style="height:27px;width: 23px;">
                    <img src="@/assets/img/file/w.png" alt="" class="ad-img">
                </div>
                <div class="font-title p-l p-r">《{{ info.name }}》报名申请表</div>
                <div class="font-title cursor-p" style="color: #d10b00;" @click="proxy.$comJs.downloadUrl('https://file.xdqycx.com/'+info.file)">下载</div>
            </div>
            <el-card class="MarT">
                <template #header>
                    <div class="a-tab2">
                        <div class="navsItems navsItem" v-for="(item,i) in navs" :key="i" @click="navClick(i)">
                        <span :style="headerIndex==i?'color:#333;':'color:#8d8d8d;'">{{ item.name }}</span>
                        <div :class="headerIndex==i?'line1':'line2'"></div>
                        </div>
                    </div>
                </template>
                <div v-if="headerIndex == 0">
                    <div>
                        <el-row :gutter="5">
                            <el-col :span="8"><div class="q-font">教师：{{ info.teacher }}</div></el-col>
                            <el-col :span="8"><div class="q-font">品牌：{{ info.brand }}</div></el-col>
                            <el-col :span="8"><div class="q-font">日期：{{ info.st }}</div></el-col>
                            <el-col :span="8"><div class="q-font">人数：{{ info.pNum }}</div></el-col>
                            <el-col :span="8"><div class="q-font">方式：{{ info.method }}</div></el-col>
                            <el-col :span="8"><div class="q-font">课时：{{ info.hour }}</div></el-col>
                        </el-row>
                    </div>
                    <div class="contview">
                        <div class="title1"><span>教师简介</span></div>
                        <div class="count">
                            <div v-html="info.teacherDes"></div>
                        </div>
                    </div>
                    <div class="contview">
                        <div class="title1"><span>内容简介</span></div>
                        <div class="count">
                            <div v-html="info.cont"></div>
                        </div>
                    </div>
                </div>
                <div v-if="headerIndex == 1">
                    <div v-html="info.detail"></div>
                    <!-- <div v-for="(item,i) in kc_list" :key="i" class="p-b">
                        <div class="font-title" style="text-align: left;">{{ item.title }}</div>
                        <div class="font-title MarT" style="font-size: 14px;text-align: left;" v-for="(item1,i1) in item.list" :key="i1">
                            {{ item1.title }}
                        </div>
                    </div> -->
                </div>
                <div v-if="headerIndex == 2">
                    <div v-if="pj_list">
                        <div v-for="(item,i) in pj_list" :key="i" class="flex p-b p-t" style="border-bottom:1px solid #ebebeb;">
                            <div class="ad-view" style="width: 64px;height:64px ;border-radius: 50%;">
                                <img class="ad-img" src="https://p3.img.cctvpic.com/photoAlbum/photo/2023/09/11/PHOTZm2L96Luqv9Sb8KiuyhM230911_1000x2000.jpg" alt="" style="object-fit: fill;">
                            </div>
                            <div class="p-l" style="padding-top: 6px;">
                                <div class="font-title" style="text-align: left;">{{ item.title }}</div>
                                <div class="flex flex-w" style="margin-top:13px" v-if="item.cover.length>0">
                                    <div class="ad-view" style="width: 80px;height: 80px;background: #eaeaea;margin-right: 20px;" v-for="item1 in item.cover" :key="item1">
                                        <imgView :src="item1" />
                                    </div>
                                </div>
                                <div class="f-desc-14" style="margin-top:13px">{{ item.createdTm }}</div>   
                            </div>
                        </div>
                    </div>
                    
                    <div class="widthFull MarT20">
                        <el-row :gutter="20" >
                            <el-col :span="24"><div class="btn-submit" @click="commentbtn">去评论</div></el-col>
                        </el-row>
                        
                        
                    </div>
                    <el-dialog v-model="is_commont" title="" width="500px" style="border-radius:15px;">
                        <div style="font-size:24px;font-weight:bold;color:#333;">评论</div>
                        <div class="p-t">
                            <el-form :model="form" label-width="70px" size="large">
                                <el-form-item label="图片">
                                    <el-col :span="24">
                                        <div class="flex">
                                            <el-upload
                                                ref="upload"
                                                :auto-upload="false"
                                                list-type="picture-card"
                                                @change="handleUploadChange"
                                            >
                                                <el-icon><Plus /></el-icon>
                                            </el-upload>
                                        </div>
                                        
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="内容">
                                    <el-col :span="24"><el-input v-model="form.title" /></el-col>
                                </el-form-item>
                            </el-form>
                            <div class="btn-submit" @click="comment">提交</div>
                        </div>
                    </el-dialog>
                </div>
            </el-card>
        </div>
    </template>
  </centerView>
</template>

<script setup>
import CryptoJS from 'crypto-js';
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import centerView from '../components/centerView.vue';
import TitleView from '../components/title.vue';
import FrameView from '../components/frame.vue';
import Card1 from '../components/card1.vue';
import {useRouter } from "vue-router";
import { Plus } from '@element-plus/icons-vue'
import * as qiniu from 'qiniu-js'
import md5 from 'js-md5'
const Router = useRouter();
    const id = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob,'query')
    const info = ref(null)
    // 评价
    const pj_list = ref(null)
    const get_info=()=>{
        proxy.$http.request(proxy.$api.course+'/'+id,'get',{},false, function (res) {
            if(res&&res.data){
                info.value = res.data.data
            }
        })
        proxy.$http.request(proxy.$api.course_comment+'/'+id+'?nextTag=0&pageSize=5&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                pj_list.value = res.data.data.list
            }
        })
    }
    get_info()
    const cont = ref('')
    const is_commont = ref(false)
    const fileList = ref([])
    const commentbtn =()=>{
        is_commont.value = true
    }
    
    // 服务器资源
    const imgUrl = ref('')
    const qnToken = ref('')
    const get_resource =()=>{
        proxy.$http.request(proxy.$api.get_resource,'get',{},false, function (res) {
            if(res&&res.data){
                imgUrl.value = res.data.data.imgUrl
            }
        })
    }
    get_resource()
    const headers = ref({
        Authorization: ''
    })
    const get_qntoken =()=>{
        proxy.$http.request(proxy.$api.qnToken+'1','get',{},false, function (res) {
            if(res&&res.data){
                qnToken.value = res.data.data.token
                headers.value.Authorization = res.data.data.token
            }
        })
    }
    get_qntoken()
    // 必须手动上传文件
    const handleUploadChange = (event) => {
      const file = event.raw; // 获取上传的文件对象
        // 上传开始,参数1file是上传的文件，后两个是上个接口拿到的返回值
        var key =  Math.random().toString(36).substring(2)+"_"+ file.name
        const observable = qiniu.upload(file, key, qnToken.value,{fname:key})
        const observer = {
            next(res) {
                
            },
            error(res) {
                
            },
            complete(res) {
                //执行上传成功后的逻辑
                // form.value.hearIcon = res.key
                fileList.value.push({
                    url:proxy.$api.prefix_img+res.key
                })
                // is_usericon.value = false
            }
        }
        observable.subscribe(observer);
    };
    const form = ref({
        title:'',
    })
    const upload = ref(null)
    const comment=()=>{
        var flist = []
        if(fileList.value.length>0){
            fileList.value.map((item)=>{
                flist.push(proxy.$comJs.jqurl(item.url))
            })
        }
        proxy.$http.request(proxy.$api.course_comment,'post',{
            "cover": flist,
            "newsId": id,
            "title": form.value.title
        },false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    proxy.$comJs.msg('error',res.data.msg)
                }else{
                    proxy.$comJs.msg('success','评论成功')
                    is_commont.value  = false
                    fileList.value = []
                    form.value.title = ''
                    upload.value.clearFiles()
                    pj_list.value.push(res.data.data)
                }
            }
        })
    }
    const dialogVisible = ref(false)
    const handleClose = ()=>{
        dialogVisible.value = false
    }
    // 面包屑
    const breadcrumb_list = [{name:'重要活动'},{name:'精品课程'},{name:'课程详情'}]
    const navs=[
        {name:'课程介绍',},{name:'课程目录',},{name:'客户评价',},
    ]
    const headerIndex = ref(0)
    const navClick=(i)=>{
        headerIndex.value = i
    }
    
    // 课程目录
    const kc_list = ref([
        {title:'基础阶段1',list:[{title:'第一课时:22222222222222222222222222222'},{title:'第一课时:22222222222222222222222222222'}]},
        {title:'基础阶段1',list:[{title:'第一课时:22222222222222222222222222222'}]}
    ])
</script>

<style lang='less' scoped>
.tit{
    font-size: 37px;
    font-weight: bold;
}
.q-font{
 font-size: 16px; 
 color: #8d8d8d;  
 text-align: left;
 margin-bottom: 18px;
}
.contview{
    padding-top: 40px;
    .title1{
        width: 156px;
        height: 41px;
        background: url('@/assets/img/title-tip3.png');
        background-size:100% ;
        display: flex;
        justify-content: center;
        align-items: center;
        
        span{
            font-size: 16px;
            color: #fff;
        }
    }
    .count{
        font-size: 18px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #333333;
        line-height: 36px;
        padding-top:30px;
        text-align: left;
    }
}
.ad-more{
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    width: 96px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #d10b00;
    cursor: pointer;
    border-radius: 15px;
}
.addbtn{
    color: #fff;
    width: 210px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #d10b00;
    cursor: pointer;
    border-radius: 30px;
    font-size: 18px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 100px;
    height: 100px;
}
/deep/ .el-upload--picture-card{
    width: 100px;
    height: 100px;
}
</style>
